<script setup lang="tsx">
import { computed, onMounted, ref, watch } from 'vue';
import type { Crontab } from '@/service/api';
import { $t } from '@/locales';

defineOptions({
  name: 'CrontabWeek'
});

interface Props {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
  check: Function;
  cron: Crontab;
}
const props = defineProps<Props>();

interface Emits {
  (e: 'update'): void;
}
const emit = defineEmits<Emits>();

const weekRadioValue = ref('2');
const weekday = ref(2);
const weekCycle01 = ref(2);
const weekCycle02 = ref(3);
const weekAverage01 = ref(1);
const weekAverage02 = ref(2);
const weekCheckboxList = ref<string[]>([]);

const weekOptions: any = [];
const weekStartOptions: any = [];
function initWeekOptions() {
  weekOptions.push(
    {
      label: $t('common.job.monday'),
      value: 2
    },
    {
      label: $t('common.job.tuesday'),
      value: 3
    },
    {
      label: $t('common.job.wednesday'),
      value: 4
    },
    {
      label: $t('common.job.thursday'),
      value: 5
    },
    {
      label: $t('common.job.friday'),
      value: 6
    },
    {
      label: $t('common.job.saturday'),
      value: 7
    },
    {
      label: $t('common.job.sunday'),
      value: 1
    }
  );
  weekStartOptions.push(
    {
      label: $t('common.job.monday'),
      value: 2
    },
    {
      label: $t('common.job.tuesday'),
      value: 3
    },
    {
      label: $t('common.job.wednesday'),
      value: 4
    },
    {
      label: $t('common.job.thursday'),
      value: 5
    },
    {
      label: $t('common.job.friday'),
      value: 6
    },
    {
      label: $t('common.job.saturday'),
      value: 7
    },
    {
      label: $t('common.job.sunday'),
      value: 1,
      disabled: true
    }
  );
}
initWeekOptions();

function retsetParam() {
  weekday.value = 2;
  weekCycle01.value = 2;
  weekCycle02.value = 3;
  weekAverage01.value = 1;
  weekAverage02.value = 2;
  weekCheckboxList.value = [];
}

// 计算两个周期值
const weekCycleTotal = computed(() => {
  const c01 = props.check(weekCycle01.value, 1, 7);
  const c02 = props.check(weekCycle02.value, 1, 7);
  return `${c01}-${c02}`;
});
// 计算平均用到的值
const weekAverageTotal = computed(() => {
  const a01 = props.check(weekAverage01.value, 1, 4);
  const a02 = props.check(weekAverage02.value, 1, 7);
  return `${a01}#${a02}`;
});
// 最近的工作日（格式）
const weekdayCheck = computed(() => {
  const wd = props.check(weekday.value, 1, 7);
  return wd;
});
// 计算勾选的checkbox值合集
const weekCheckboxString = computed(() => {
  const str = weekCheckboxList.value.join();
  return str === '' ? '*' : str;
});

watch(
  () => props.cron,
  () => {
    weekValueChange(props.cron);
  }
);
watch(
  () => weekRadioValue.value,
  () => {
    radioChange();
  }
);
watch(
  () => weekCycleTotal.value,
  () => {
    weekCycleChange();
  }
);
watch(
  () => weekAverageTotal.value,
  () => {
    weekCverageChange();
  }
);
watch(
  () => weekdayCheck.value,
  () => {
    weekdayChange();
  }
);
watch(
  () => weekCheckboxString.value,
  () => {
    weekCheckboxChange();
  }
);

// 单选按钮值变化时
function radioChange() {
  if (weekRadioValue.value !== '2' && props.cron.day !== '?') {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    emit('update', 'day', '?', 'week');
  }
  switch (weekRadioValue.value.toString()) {
    case '1':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'week', '*');
      break;
    case '2':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'week', '?');
      break;
    case '3':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'week', weekCycleTotal.value);
      break;
    case '4':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'week', weekAverageTotal.value);
      break;
    case '5':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'week', `${weekdayCheck.value}L`);
      break;
    case '6':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'week', weekCheckboxString.value);
      break;
    default:
      break;
  }
}
// 周期两个值变化时
function weekCycleChange() {
  weekRadioValue.value = '3';
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  emit('update', 'week', weekCycleTotal.value);
}
// 平均两个值变化时
function weekCverageChange() {
  weekRadioValue.value = '4';
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  emit('update', 'week', weekAverageTotal.value);
}
// 最近工作日值变化时
function weekdayChange() {
  weekRadioValue.value = '5';
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  emit('update', 'week', `${weekday.value}L`);
}
// checkbox值变化时
function weekCheckboxChange() {
  weekRadioValue.value = '7';
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  emit('update', 'week', weekCheckboxString.value);
}

function weekValueChange(cronVal: Crontab) {
  weekRadioValue.value = '';
  retsetParam();
  const val = cronVal.week;
  if (val === '*') {
    weekRadioValue.value = '1';
  } else if (val === '?') {
    weekRadioValue.value = '2';
  } else if (val.includes('-')) {
    weekRadioValue.value = '3';
    const v = val.split('-');
    weekCycle01.value = Number.parseInt(v[0], 10);
    weekCycle02.value = Number.parseInt(v[1], 10);
  } else if (val.includes('#')) {
    weekRadioValue.value = '4';
    const v = val.split('#');
    weekAverage01.value = Number.parseInt(v[0], 10);
    weekAverage02.value = Number.parseInt(v[1], 10);
  } else if (val.includes('L')) {
    weekRadioValue.value = '5';
    const v = val.split('L');
    weekday.value = Number.parseInt(v[0], 10);
  } else {
    weekRadioValue.value = '6';
    weekCheckboxList.value = val.split(',');
  }
}

onMounted(() => {
  const cronVal = props.cron;
  weekValueChange(cronVal);
});
</script>

<template>
  <div>
    <NForm>
      <NRadioGroup v-model:value="weekRadioValue">
        <NFormItem class="form-item-height">
          <NRadio value="1">{{ $t('common.job.weekOne') }}</NRadio>
        </NFormItem>
        <NFormItem class="form-item-height">
          <NRadio value="2">{{ $t('common.job.notSpecify') }}</NRadio>
        </NFormItem>
        <NFormItem class="form-item-height">
          <NRadio value="3" />
          &nbsp;{{ $t('common.job.weekThree') }}&nbsp;
          <NSelect v-model:value="weekCycle01" :options="weekStartOptions" class="w-30%" />
          &nbsp;-&nbsp;
          <NSelect
            v-model:value="weekCycle02"
            :options="[
              {
                label: $t('common.job.monday'),
                value: 2,
                disabled: 2 < weekCycle01
              },
              {
                label: $t('common.job.tuesday'),
                value: 3,
                disabled: 3 < weekCycle01
              },
              {
                label: $t('common.job.wednesday'),
                value: 4,
                disabled: 4 < weekCycle01
              },
              {
                label: $t('common.job.thursday'),
                value: 5,
                disabled: 5 < weekCycle01
              },
              {
                label: $t('common.job.friday'),
                value: 6,
                disabled: 6 < weekCycle01
              },
              {
                label: $t('common.job.saturday'),
                value: 7,
                disabled: 7 < weekCycle01
              },
              {
                label: $t('common.job.sunday'),
                value: 1,
                disabled: 1 < weekCycle01 && 1 !== 1
              }
            ]"
            class="w-30%"
          />
        </NFormItem>
        <NFormItem label-width="auto" class="form-item-height">
          <NRadio value="4" />
          &nbsp;{{ $t('common.job.weekFourPre') }}&nbsp;
          <NInputNumber v-model:value="weekAverage01" :min="1" :max="4" button-placement="both" class="w-30%" />
          &nbsp;{{ $t('common.job.weekFourSuf') }} &nbsp;
          <NSelect v-model:value="weekAverage02" :options="weekOptions" class="w-30%" />
        </NFormItem>
        <NFormItem class="form-item-height">
          <NRadio value="5" />
          &nbsp;{{ $t('common.job.weekFive') }}&nbsp;
          <NSelect v-model:value="weekday" :options="weekOptions" class="w-30%" />
        </NFormItem>
        <NFormItem class="form-item-height">
          <NRadio value="6" />
          &nbsp;{{ $t('common.job.specify') }}&nbsp;
          <NSelect
            v-model:value="weekCheckboxList"
            :options="weekOptions"
            multiple
            class="w-50%"
            :placeholder="$t('common.job.multipleChoices')"
          />
        </NFormItem>
      </NRadioGroup>
    </NForm>
  </div>
</template>

<style scoped>
.form-item-height {
  --n-blank-height: 0px !important;
  --n-feedback-height: 0px !important;
}
</style>
